<template>
  <div class="quadrant-view">
    <AppHeader title="四象限" />

    <div class="quadrant-grid">
      <div v-for="quadrant in quadrants" :key="quadrant.level" class="quadrant-cell">
        <div class="quadrant-header">
          <span class="quadrant-badge" :style="{ background: quadrant.color }">{{ quadrant.roman }}</span>
          <span class="quadrant-title" :style="{ color: quadrant.color }">{{ quadrant.title }}</span>
        </div>
        <div v-if="tasksByQuadrant[quadrant.level] && tasksByQuadrant[quadrant.level].length">
          <div 
            v-for="task in tasksByQuadrant[quadrant.level]" 
            :key="task.id" 
            class="task-card" 
            :class="{ completed: task.status == 2 }"
            @click="goToEditTask(task.id)"
          >
            <el-checkbox
              :model-value="task.status == 2"
              @change="val => handleTaskComplete(task, val)"
            />
            <div class="task-content">
              <div class="task-title">{{ task.title }}</div>
              <div class="task-time" v-if="task.expectTime">{{ task.expectTime }}</div>
            </div>
          </div>
        </div>
        <div v-else class="no-task">没有任务</div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import AppHeader from '../components/AppHeader.vue'
import { useRouter } from 'vue-router'

export default {
  name: 'QuadrantView',
  components: {
    AppHeader
  },
  setup() {
    const store = useStore()
    const tasksByQuadrant = computed(() => store.state.tasksByQuadrant)
    const router = useRouter()

    const quadrants = [
      { level: 1, roman: 'Ⅰ', title: '重要且紧急', color: '#F56C6C' },
      { level: 2, roman: 'Ⅱ', title: '重要不紧急', color: '#F6BD16' },
      { level: 3, roman: 'Ⅲ', title: '不重要但紧急', color: '#3B7FF6' },
      { level: 4, roman: 'Ⅳ', title: '不重要不紧急', color: '#13C2C2' }
    ]

    const handleTaskComplete = async (task, checked) => {
      const newStatus = checked ? 2 : 1
      if (task.status !== newStatus) {
        await store.dispatch('updateTask', { ...task, status: newStatus })
        await store.dispatch('fetchTasksByQuadrant')
      }
    }

    const goToEditTask = (taskId) => {
      router.push({ name: 'TaskEdit', params: { id: taskId } })
    }

    // 页面挂载时拉取数据
    store.dispatch('fetchTasksByQuadrant')

    return {
      tasksByQuadrant,
      quadrants,
      handleTaskComplete,
      goToEditTask
    }
  }
}
</script>

<style lang="scss" scoped>
.quadrant-view {
  padding: 15px;
  padding-top: 60px; /* Add padding for the fixed header */
}
.quadrant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  padding: 0 15px 15px 15px; /* Add padding around the grid instead */
}
.quadrant-cell {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px #eee;
  padding: 18px 12px 12px 12px;
  display: flex;
  flex-direction: column;
}
.quadrant-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.quadrant-badge {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  line-height: 28px;
  margin-right: 8px;
}
.quadrant-title {
  font-size: 17px;
  font-weight: bold;
}
.no-task {
  color: #bbb;
  text-align: center;
  margin-top: 32px;
}
.task-card {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 1px 4px #f0f1f2;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.task-card .el-checkbox {
  margin-right: 12px;
}
.task-card.completed .task-title {
  color: #bbb;
  text-decoration: line-through;
}
.task-title {
  font-size: 15px;
  font-weight: 500;
}
.task-time {
  font-size: 12px;
  color: #999;
}
</style> 